<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>link属性</title>
    <script type="text/javascript" src="js/1.4.8/angular.js"></script>
    <script type="text/ng-template" id="tpl">
        <button>点我就显示</button>
    </script>
</head>
<body>
    <div ng-controller="myCtrl">
        <ts-hello></ts-hello><br>
        <div>{{content}}</div>
    </div>

    <script type="text/javascript">
        var app = angular.module("app", []);

        // 定义指令（驼峰式写法）
        app.directive("tsHello",function () {
            return{
                restrict:"ACE",
                templateUrl:'tpl',
                replace:true,
                // 1：在指定的执行过程中，由于指令中并没有定义scope属性，因此，
                // scope参数就是元素外出的父级scope属性，即控制器注入的$scope属性
                // 2：iEle参数就是被指令模板体会后的<button>元素，可以直接调用bind
                // 方法绑定元素的各类事件，在这里绑定了按钮的click事件，在执行该事件的
                // 函数中，调用了scope属性的$apply()方法，它的功能是在执行完方法中的函数之后，
                // 重新渲染页面视图
                link:function (scope,iEle,iAttrs) {
                    iEle.bind("click",function () {
                        scope.$apply(function () {
                            scope.content = "Fuck You!";
                        });
                        iAttrs.$$element[0].disabled = true;
                    });
                }
            }
        });
        
        app.controller("myCtrl",["$scope",function ($scope) {

        }]);
    </script>
</body>
</html>